<template>
	<!-- 多图显示组件 -->
	<view>
		<div class="imageMultiComponent">
			<div v-show="newData.styleType==='样式一'"
				 :style="{ margin: `${newData.pageSpacingOut}px`, padding: `${newData.pageSpacingIn}px`, backgroundColor: newData.background,borderRadius: `${newData.borderRadius==1?6:0}px`,}"
				 :class="newData.background && newData.background.indexOf('bg-') != -1 ? newData.background : '' ">
				<div class="flex">
					<!--左边-->
					<div-base-navigator :pageUrl="newData.imageItems[0].pageUrl" class="flex-sub "
										:style="{height: `${(Number(newData.height)+Number(newData.imageSpacing))}px`,
				   margin:`${newData.imageSpacing}px`,marginRight:`${newData.imageSpacing/2}px`,marginBottom:`0px`, }">
						<div class="image-multi-left"
							 :style="{height: `${(Number(newData.height)+Number(newData.imageSpacing))}px`,
						background: newData.imageItems[0].imageUrl?`url(${newData.imageItems[0].imageUrl}) round`:''}" ></div>
					</div-base-navigator>
					<!--右边-->
					<div class="flex-sub "
						 :style="{margin:`${newData.imageSpacing}px`,marginLeft:`${newData.imageSpacing/2}px`, }">
						<div class="flex "  @click="goPage(newData.imageItems[1].pageUrl)">
							<div  :pageUrl="newData.imageItems[1].pageUrl" class="image-multi-right"
							:style="{height: `${newData.height/2}px`,background: newData.imageItems[1].imageUrl?`url(${newData.imageItems[1].imageUrl}) round`:''}" >
							</div>
						</div>
						<div class="flex image-multi-right"
							 :style="{marginTop:`${newData.imageSpacing}px`, }">
							<div-base-navigator :pageUrl="newData.imageItems[2].pageUrl" class="flex-sub" :style="{marginRight: `${newData.imageSpacing/2}px`,}">
								<div class="image-multi-class"
									 :style="{height: `${newData.height/2}px`,
							background: newData.imageItems[2].imageUrl?`url(${newData.imageItems[2].imageUrl}) round`:''}" ></div>
							</div-base-navigator>
							<div-base-navigator :pageUrl="newData.imageItems[3].pageUrl" class="flex-sub" :style="{marginLeft: `${newData.imageSpacing/2}px`,}">
								<div class="image-multi-class"
									 :style="{height: `${newData.height/2}px`,
							background: newData.imageItems[3].imageUrl?`url(${newData.imageItems[3].imageUrl}) round`:''}" ></div>
							</div-base-navigator>
						</div>
					</div>
				</div>
			</div>

			<div v-show="newData.styleType==='样式二'"
				 :style="{ margin: `${newData.pageSpacingOut}px`, padding: `${newData.pageSpacingIn}px`, backgroundColor: newData.background,borderRadius: `${newData.borderRadius==1?6:0}px`,}"
				 :class="newData.background && newData.background.indexOf('bg-') != -1 ? newData.background : '' ">
				<div class="flex ">
					<div-base-navigator :pageUrl="newData.imageItems[0].pageUrl" class="flex-sub"
										:style="{height: `${(Number(newData.height))/2}px`,
				   marginTop:`${newData.imageSpacing}px`,
				   marginLeft:`${newData.imageSpacing}px`,
				   marginRight:`${newData.imageSpacing/2}px`,
				   marginBottom:`${newData.imageSpacing/2}px`, }">
						<div class="image-multi-class"
							 :style="{height: `${newData.height/2}px`,background: newData.imageItems[0].imageUrl?`url(${newData.imageItems[0].imageUrl}) round`:''}" ></div>
					</div-base-navigator>
					<div-base-navigator :pageUrl="newData.imageItems[1].pageUrl" class="flex-sub"
										:style="{height: `${(Number(newData.height))/2}px`,
				   marginTop:`${newData.imageSpacing}px`,
				   marginRight:`${newData.imageSpacing}px`,
				   marginLeft:`${newData.imageSpacing/2}px`,
				   marginBottom:`${newData.imageSpacing/2}px`, }">
						<div class="image-multi-class"
							 :style="{height: `${newData.height/2}px`,background: newData.imageItems[1].imageUrl?`url(${newData.imageItems[1].imageUrl}) round`:''}" ></div>
					</div-base-navigator>
				</div>
				<div class="flex">
					<div-base-navigator :pageUrl="newData.imageItems[2].pageUrl" class="flex-sub"
										:style="{height: `${(Number(newData.height))/2}px`,
				   marginTop:`${newData.imageSpacing/2}px`,
				   marginRight:`${newData.imageSpacing/2}px`,
				   marginLeft:`${newData.imageSpacing}px`,
				   marginBottom:`${newData.imageSpacing}px`,}">
						<div class="image-multi-class"
							 :style="{height: `${newData.height/2}px`,background: newData.imageItems[2].imageUrl?`url(${newData.imageItems[2].imageUrl}) round`:''}" ></div>
					</div-base-navigator>
					<div-base-navigator :pageUrl="newData.imageItems[3].pageUrl" class="flex-sub"
										:style="{height: `${(Number(newData.height))/2}px`,
				   marginTop:`${newData.imageSpacing/2}px`,
				   marginRight:`${newData.imageSpacing/2}px`,
				   marginLeft:`${newData.imageSpacing/2}px`,
				   marginBottom:`${newData.imageSpacing}px`,}">
						<div class="image-multi-class"
							 :style="{height: `${newData.height/2}px`,background: newData.imageItems[3].imageUrl?`url(${newData.imageItems[3].imageUrl}) round`:''}" ></div>
					</div-base-navigator>
					<div-base-navigator :pageUrl="newData.imageItems[4].pageUrl" class="flex-sub"
										:style="{height: `${(Number(newData.height))/2}px`,
				   marginTop:`${newData.imageSpacing/2}px`,
				   marginRight:`${newData.imageSpacing}px`,
				   marginLeft:`${newData.imageSpacing/2}px`,
				   marginBottom:`${newData.imageSpacing}px`,}">
						<div class="image-multi-class"
							 :style="{height: `${newData.height/2}px`,background: newData.imageItems[4].imageUrl?`url(${newData.imageItems[4].imageUrl}) round`:''}" ></div>
					</div-base-navigator>
				</div>
			</div>

			<div v-show="newData.styleType==='样式三'"
				 :style="{ margin: `${newData.pageSpacingOut}px`, padding: `${newData.pageSpacingIn}px`, backgroundColor: newData.background,borderRadius: `${newData.borderRadius==1?6:0}px`,}"
				 :class="newData.background && newData.background.indexOf('bg-') != -1 ? newData.background : '' ">
				<div class="flex">
					<!--左边-->
					<div-base-navigator :pageUrl="newData.imageItems[0].pageUrl" class="flex-sub "
										:style="{height: `${(Number(newData.height)+Number(newData.imageSpacing))}px`,
			  				   marginTop:`${newData.imageSpacing}px`,
			  				   marginRight:`0px`,
			  				   paddingRight:`${newData.imageSpacing/2}px`,
			  				   marginLeft:`${newData.imageSpacing}px`,
			  				   marginBottom:`${newData.imageSpacing}px`,}">
						<div class="image-multi-left"
							 :style="{height: `${(Number(newData.height)+Number(newData.imageSpacing))}px`,
			  						background: newData.imageItems[0].imageUrl?`url(${newData.imageItems[0].imageUrl}) round`:''}" ></div>
					</div-base-navigator>
					<!--右边-->
					<div class="flex-sub"
						 :style="{height: `${newData.height}px`,
						marginTop:`${newData.imageSpacing}px`,
						marginRight:`${newData.imageSpacing}px`,
						marginLeft:`${newData.imageSpacing/2}px`,
						marginBottom:`${newData.imageSpacing}px`,}">
						<div class="flex" @click="goPage(newData.imageItems[1].pageUrl)">
							<div :pageUrl="newData.imageItems[1].pageUrl" class="image-multi-right"
												:style="{height: `${newData.height/3}px`,
							marginBottom:`${newData.imageSpacing/2}px`,
							background: newData.imageItems[1].imageUrl?`url(${newData.imageItems[1].imageUrl}) round`:''}" ></div>
						</div>
						<div class="flex" @click="goPage(newData.imageItems[2].pageUrl)">
							<div :pageUrl="newData.imageItems[2].pageUrl" class="image-multi-right"
												:style="{height: `${newData.height/3}px`,
						marginTop:`${newData.imageSpacing/2}px`,
						marginBottom:`${newData.imageSpacing/2}px`,
						background: newData.imageItems[2].imageUrl?`url(${newData.imageItems[2].imageUrl}) round`:''}" ></div></div>
						<div class="flex" @click="goPage(newData.imageItems[3].pageUrl)">
							<div :pageUrl="newData.imageItems[3].pageUrl" class="image-multi-right"
												:style="{height: `${newData.height/3}px`,
						marginTop:`${newData.imageSpacing/2}px`,
						background: newData.imageItems[3].imageUrl?`url(${newData.imageItems[3].imageUrl}) round`:''}" ></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	const app = getApp();

	import { pageUrls } from '../div-base/div-page-urls.js'
	import divBaseNavigator from '../div-base/div-base-navigator.vue'
	export default {
		name: 'div-image-multi',
		props: {
			value: {
				type: Object,
				default: function() {
					return {
						styleType: '样式一',
						height: 275,
						imageSpacing: 0,
						borderRadius: '0',
						pageSpacingIn: 0,
						background: '#FFFFFF',
						pageSpacingOut: 0,
						imageItems: [{
							id       : Math.random(),
							imageUrl : '',
							pageUrl : '',
						},{
							id       : Math.random(),
							imageUrl : '',
							pageUrl : '',
						},{
							id       : Math.random(),
							imageUrl : '',
							pageUrl : '',
						},{
							id       : Math.random(),
							imageUrl : '',
							pageUrl : '',
						},{
							id       : Math.random(),
							imageUrl : '',
							pageUrl : '',
						},]
					}
				}
			}
		},
		components: {
			divBaseNavigator
		},
		data() {
			return {
				theme: app.globalData.theme, //全局颜色变量
				newData: this.value,
				pageUrls : pageUrls
			};
		},
		methods: {
			goPage(pageUrl) {
				if (pageUrl) {
					if(this.pageUrls.tabPages.indexOf(pageUrl)!=-1){
						uni.switchTab({
							url: pageUrl
						});
					}else{
						uni.navigateTo({
							url: pageUrl
						});
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.image-multi-class{
		background:  round;
		width: 100%;
	}

	.image-multi-left{
		background:  round;
		width: 80%;
	}

	.image-multi-right{
		background:  round;
		width: 120%;
		margin-left: -70rpx;
	}
</style>
